<template>
  <div class="echarts">
    <div :id="id" v-show="echartsType != 'table'"></div>
  </div>
</template>
   
  <script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import axios from "axios";
const props = defineProps({
  id: String,
  type: {
    type: String,
    default: 'bar'
  },
  toolbox: {
    type: Boolean,
    default: false
  },
  valueType:{
    type: String,
    default: ''
  },
})
const echartsType = ref(0)
echartsType.value = props.type


const getOp =(data) => {
  if(echartsType.value=='bar'){
    return {
      grid: {
        top: '16%',
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [{value:'正常'},{value:'数据不稳定'},{value:'数据丢失多'},{value:'长期离线'}]
        }
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle:{
            color:'rgba(252, 248, 248, 0.4)',
            fontSize:14
          },
          splitLine: {
            show: true, // 显示坐标轴分隔线
            lineStyle: {
              type: 'dashed', // 设置分隔线为虚线
              color: '#3CFDFB',
              opacity: 0.2// 透明度 30%
            }
          },

        }
      ],

      series: [
        {
          type: echartsType.value,
          stack: 'Ad',
          barWidth: '32',
          label: {
            show: true,
            color: "#fff",
            fontSize: 8,
            position: 'top', // 设置标签显示位置为顶部
            formatter: '{c}台'
          },
          itemStyle:{
            borderRadius: [5, 5, 5, 5], // 设置柱子两端为圆角
          },
          data: [{value:210,itemStyle:{color:'#3CFDFB'}},
            {value:10,itemStyle:{color:'#C5DD52'}},
            {value:1,itemStyle:{color:'#F71D3F'}} ,
            {value:0,itemStyle:{color:'#1DF9BA'}}]
        }

      ]
    }
  }else if(echartsType.value=='line'){
    //首页客户情况的数据获取
    return {
      textStyle: {
        fontSize: 16,
        color: '#fff'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        top: '5%',
        left: '260',
        align: "left",
        icon: 'rect',
        padding: [ 0,0,0,0],
        itemGap: 26,//示例组件间距
        itemWidth: 20,//示例组件图标大小
        itemHeight: 6,//示例组件图标大小
        textStyle: {
          color: '#fff',
          fontSize: 9,
        }
      },
      grid: {
        top: '25%',
        left: '3%',
        right: '4%',
        bottom: '8%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false ,
          data: data.map((e) => (e.industrytypename))
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: true, // 显示坐标轴分隔线
            lineStyle: {
              type: 'dashed', // 设置分隔线为虚线
              color: '#3CFDFB',
              opacity: 0.3// 透明度 30%
            }
          },
        }
      ],
      dataZoom: [
        {
          type: 'slider',
          show: false,
          realtime: true,
          startValue: 0,
          endValue: 4, // 初始显示index0-30的数据,可根据你的数据量设置
          filterMode: 'none',
        }
      ],
      series: [
        {
          name: '客户总数',
          type: echartsType.value,
          smooth: true,//曲线
          symbolSize: 0,
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            color:'#3CFDFB',
          },
          areaStyle: {//阴影区域
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(60, 253, 251, 0.2)'
              },
              {
                offset: 1,
                color: 'rgba(60, 253, 251, 0.1)'
              }
            ])
          },
          data: data.map((e) => (e.customertotal))
        },
        {
          name: '设备总数',
          type: echartsType.value,
          smooth: true,//曲线
          symbolSize: 0,
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            color:'#C5DD52'
          },
          areaStyle: {//阴影区域
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(197, 221, 82, 0.2)'
              },
              {
                offset: 1,
                color: 'rgba(197, 221, 82, 0.1)'
              }
            ])
          },
          data: data.map((e) => (e.embtotal))
        }
      ]
    }
  }
}
var timer = null;
const dotChart = () => {
  var myChart = echarts.init(document.getElementById(props.id))

  var toolbox = {
    show: true,
    left: 0,
    iconStyle: {
      borderColor: '#fff' // 图标默认颜色
    },
    emphasis: {
      iconStyle: {
        borderColor: '#54C3F1' // 图标hover颜色
      }
    },
    feature: {


      // restore: { show: true, title: '还原' },
      saveAsImage: { show: true, title: '截图下载' },
      magicType: {
        type: ['line', 'bar', 'stack','tiled'],
        title: { bar: '柱状图', line: '折现图', stack: '堆叠', tiled: '平铺' }
      } //此处最新版本echarts可设置三个值（stack-堆叠模式）,可自行查看echarts文档
    }
  }
  if(echartsType.value=='bar') {
    var option = getOp();
    props.toolbox ? (option.toolbox = toolbox) : {}
    option && myChart.setOption(option)
  }else if(echartsType.value=='line'){
    axios.get('/static/json/data/hygk.json?time=' + new Date().getTime()).then(function (json) {
      var option = getOp(json.data);
      props.toolbox ? (option.toolbox = toolbox) : {}
      option && myChart.setOption(option)

      //动态显示行情数据
      var startNumber = 0;
      // 有多少条数据
      var xAxisDatalen = json.data.length;
      // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
      var len = 4; //这里请注意
      timer && clearInterval(timer);
      timer = setInterval(function() {
        if (startNumber === xAxisDatalen - len) {
          startNumber = 0;
        }
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: startNumber,
          endValue: startNumber + len,
        });
        startNumber++;
      }, 2000);
    })
  }

}

onMounted(() => {
  dotChart()
})
</script>
   
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
.echarts {
  height: 100%;
  padding: 0 5px;
  & > div {
    height: 100%;
    width: 100%;
    :deep(canvas) {
      height: 100% !important;
      width: 100% !important;
    }
  }
}
.table_right {
  text-align: right;
  padding: 0 10px 10px 0;
}
</style>